<template>
  <div class="fdx-photo-swiper" ref="photoSwiper">
    <transition name="fdx-fade-in">
      <span
        class="fdx-icon-more btn-more"
        v-show="dot && visible"
        @click="$emit('on-dot')"></span>
    </transition>
    <transition
      name="swipe"
      @enter="enter"
      @after-enter="afterEnter"
      @leave="leave"
      @after-leave="afterLeave">
      <div
        class="swipe-wrapper"
        ref="swipeWrapper"
        v-show="visible">
        <mt-swipe
          :auto="0"
          ref="swipeWrapper"
          :show-indicators="false"
          :default-index="curIndex"
          @change="handleChange"
          :speed="100">
          <mt-swipe-item
            class="item"
            v-for="(item,index) in swiperList"
            :key="index"
            :class="{'is-active':index == curIndex}">
            <div class="img-wrapper" @click="close">
              <img :src="item[imgField]" class="img" @load="imgLoad(index)"/>
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>
    </transition>
    <transition name="fdx-fade-in">
      <div
        class="mint-swipe-indicators"
        v-show="visible && swiperList.length>1">
        <div
          class="mint-swipe-indicator"
          v-for="(item,index) in swiperList"
          :key="index"
          :class="{'is-active':index == curIndex}"></div>
      </div>
    </transition>
    <mask-layer v-model="visible" @click.native="close"></mask-layer>
  </div>
</template>
<script type="text/ecmascript-6">
import MaskLayer from 'base/mask/mask'
import animations from 'create-keyframe-animation'
export default {
  components: {
    MaskLayer
  },
  props: {
    swipers: {
      type: [Array, String],
      default: function() {
        return []
      }
    },
    startIndex: {
      type: Number,
      default: 0
    },
    dot: {
      type: Boolean,
      default: false
    },
    height: {
      type: [Number, String],
      default: 'auto'
    },
    imgField: {
      type: String,
      default: 'imagePath'
    }
  },
  computed: {
    swiperList() {
      return _.isString(this.swipers)
        ? [{ [this.imgField]: this.swipers }]
        : this.swipers
    }
  },
  data() {
    return {
      // mint-swipe-items-wrap
      visible: false,
      curIndex: this.startIndex,
      maxImgHeight: 0
    }
  },
  mounted() {
    if (this.height !== 'auto') {
      this.$refs.photoSwiper.querySelector('.mint-swipe').style.height =
        this.height + 'px'
    }
  },
  methods: {
    open(el, index) {
      this.visible = true
      this.curIndex = index || this.startIndex
      this.target = el
      this.$nextTick(() => {
        this.$emit('open')
      })
      if (this.maxImgHeight) {
        this.$refs.photoSwiper.querySelector('.mint-swipe').style.height = this.maxImgHeight + 'px'
      }
    },
    close() {
      this.$emit('change', this.curIndex)
      this.$emit('close')
      this.visible = false
    },
    getItems() {
      return this.$refs.photoSwiper.querySelectorAll('.item')
    },
    getCurItem() {
      return this.$refs.photoSwiper.querySelector('.is-active')
    },
    getImgs() {
      return this.$refs.photoSwiper.querySelectorAll('.img')
    },
    imgLoad(index) {
      if (this.height !== 'auto') {
        event.target.style.height = this.height + 'px'
      } else {
        const scale = event.target.width / window.innerWidth
        var height = event.target.height / scale
        var heightPixel = height + 'px'
        this.maxImgHeight = Math.max(this.maxImgHeight, height)
        event.target.style.width = window.innerWidth
        event.target.style.height = heightPixel
        this.$refs.photoSwiper.querySelector('.mint-swipe').style.height = this.maxImgHeight + 'px'
      }
    },
    handleChange(index) {
      this.curIndex = index
    },
    enter(el, done) {
      const { x, y, scale } = this._getPosAndScale()
      let animation = {
        0: {
          transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
        },
        100: {
          transform: `translate3d(0,-50%,0) scale(1)`
        }
      }
      animations.registerAnimation({
        name: 'move',
        animation,
        presets: {
          duration: 400,
          easing: 'linear'
        }
      })

      animations.runAnimation(this.$refs.swipeWrapper, 'move', done)
    },
    afterEnter() {
      animations.unregisterAnimation('move')
      this.$refs.swipeWrapper.style.animation = ''
    },
    leave(el, done) {
      this.$refs.swipeWrapper.style.transition = 'all 0.4s'
      const { x, y, scale } = this._getPosAndScale()
      this.$refs.swipeWrapper.style.transform = `translate3d(${x}px,${y}px,0) scale(${scale})`
      const timer = setTimeout(done, 400)
      this.$refs.swipeWrapper.addEventListener('transitionend', () => {
        clearTimeout(timer)
        done()
      })
    },
    afterLeave() {
      this.$refs.swipeWrapper.style.transition = ''
      this.$refs.swipeWrapper.style.transform = ''
    },
    _getPosAndScale() {
      if (!this.target) {
        return
      }
      const elRect = this.target.getBoundingClientRect()
      const targetWidth = elRect.width
      const width = window.innerWidth
      const scale = targetWidth / width
      const x = -(window.innerWidth / 2 - elRect.left - targetWidth / 2)
      let y = 0
      if (elRect.top + elRect.height / 2 < window.innerHeight / 2) {
        if (x === 0) {
          y = -(window.innerHeight / 2 - elRect.top)
        } else {
          y = -(window.innerHeight / 2 - elRect.top + elRect.height)
        }
      } else {
        if (x === 0) {
          y = elRect.top - window.innerHeight / 2
        } else {
          y = elRect.top - elRect.height - window.innerHeight / 2
        }
      }

      return {
        x,
        y,
        scale,
        width: elRect.width,
        height: elRect.height
      }
    }
  }
}
</script>
<style  lang="scss">
@import "../../assets/sass/_vars";
.fdx-photo-swiper {
  .btn-more {
    font-size: 30px;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0 10px 10px 10px;
    z-index: 2001;
    color: #fff;
    opacity: 0.4;
  }
  .swipe-wrapper {
    position: fixed;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translate3d(0, -50%, 0);
    z-index: 2001;

    .item {
      .img-wrapper{
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
      }
    }

    .mint-swipe {
      // height: 200px;
      width: 100%;
    }
    &.swipe-enter-active,
    &.swipe-leave-active {
      transition: all 0.4s;

      .top,
      .bottom {
        transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32);
      }
    }

    &.swipe-enter,
    &.swipe-leave-to {
      opacity: 0;

      .top {
        transform: translate3d(0, -100px, 0);
      }

      .bottom {
        transform: translate3d(0, 100px, 0);
      }
    }
    img {
      width: 100%;
    }
  }
  .mint-swipe-indicators {
    position: fixed;
    z-index: 2001;
    .mint-swipe-indicator {
      background-color: #fff;
      opacity: 0.3;
      &.is-active {
        opacity: 0.7;
      }
    }
  }
}
</style>
